<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/business/list' }">查看</el-breadcrumb-item>
        <el-breadcrumb-item>价格清单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer viewBusinessPage">
      <!-- 表格 -->
      <div class="zy-form my-table">
        <template>
          <el-table
                  border
                  :data="tableData"
                  style="width: 100%"
                  :span-method="objectSpanMethod"
          >
            <el-table-column  label="方案名称">
              <template>
                {{'方案名称'}}
              </template>
            </el-table-column>
            <el-table-column v-for="(item,index) in items" :key="item" :label="item.itemName">
              <template slot-scope="scope">
                {{scope.row.values[index]}}
              </template>
            </el-table-column>
            <el-table-column prop="tbValue4" label="成本价">
              <template slot-scope="scope">
                {{scope.row.minPrice}}
              </template>
            </el-table-column>
            <el-table-column prop="tbValue4" label="销售底价">
              <template slot-scope="scope">
                {{scope.row.costPrice}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <!-- 表格结束 -->
    </div>

  </div>
</template>

<script>
  import Http from "../../libs/http.js";
  export default {
    name: "viewBusiness",
    data() {

      return {
        index:0,
        productId:this.$route.query.id,
        // 表格
        items:[ ],
        tableData:[]
      };
    },

    created() {
      this.getItems();
      this.getprice();
    },
    methods: {
      initTableData: function() {
        this.getNum(this.items.length-1,0,'');
      },
      getprice(){
        Http.api.get("/insure/"+this.productId+"/price").then((res)=>{
          let items = res.data;
          items.forEach((item)=>{
            this.$set(item,'values',item.itemNames.split(','));
          })
          this.tableData = items;
          console.log(this.tableData);

        })
      },
      getItems(){
        Http.api.get("/insure/"+this.productId+"/items").then((res)=>{
          this.items= res.data;
          this.items.forEach((item)=>{
            this.$set(item,'value',item.itemValues.split(','));
            console.log(this.items);
            // this.initTableData();
          })
        })
      },

      getNum(totalLength,currentLength,v){
        let bf = this.items[currentLength].value;
        for(var j in bf){
          var name = '';
          if(v){
            name =v+','+bf[j];
          }else{
            name=bf[j];
          }
          if(currentLength === totalLength){
            this.index++;
            this.tableData.push({
              values:name.split(','),
              itemNames:name,
              orderIndex:this.index,
              costPrice:0,
              minPrice:0
            });

          }else{
            this.getNum(totalLength,currentLength+1,name)
          }
        }
      },

      //计算合并的行数
      calMergeRows(itemIndex){
        let i =1 ;
        if (itemIndex === this.items.length-1){
          return ;
        }

        for(var j in this.items){
          if(j>itemIndex){
            i = i * this.items[j].value.length;
          }
        }
        return i ;
      },
      // 合并行
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        //合并方案名称
        if(columnIndex == 0){
          if(rowIndex ==0){
            return { rowspan:this.tableData.length, colspan: 1 };
          }else{
            return { rowspan: 0, colspan: 0 }
          }
        }
        //合并项目
        for(let itemIndex in this.items){
          let r = this.calMergeRows(itemIndex);
          if(columnIndex === itemIndex*1+1){
            if(rowIndex % r ===0){
              return { rowspan:r, colspan: 1 };
            }else{
              return { rowspan: 0, colspan: 0 }
            }
          }
        }

      },
      // 保存
      save() {
        console.log(this.tableData);
        Http.api.post("/insure/"+this.productId+"/price",this.tableData).then((res)=>{
          this.$message({
            message: "数据已保存",
            center: true,
            iconClass: "iconfont iconcheck",
            customClass: "custom-message"
          });
        })
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
